<template>
  <van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>
<van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
  <van-swipe-item v-for="(item) in lbshuzu" :key="item.id">
    <img :src="item.bannerUrl" alt=""></van-swipe-item> 
  </van-swipe>
<div class="con">
  <div class="title">猜你喜欢</div>
  <div class="paixu">
    <span :class="{active:currentindex == index}" @click="dian(index)" v-for="(item,index) in shu" :key="index"> {{item}}</span>
  </div>
  <div class="anniu">
    <span>年度节热卖</span>
    <span>津贴联盟</span>
    <span>品质联盟</span>
    <span>漫卷优惠</span>
  </div>
  <div class="box">
    <div class="main" v-for="(item,index) in sjshuzu" :key="index">
    <img :src="item.picUrl" alt="">
    <div class="one">
      <div class="name">{{item.name}}</div>
      <div class="month">销量：{{item.monthSalesTip}}</div>
      <div class="juli">距离：{{item.distance}}</div>
    </div>
  </div>
  </div>
</div>
</template>

<script setup>
import {lunbo,shangjia} from '@/util/api'
import { onMounted,ref } from 'vue'
var lbshuzu=ref([])
var sjshuzu=ref([])
var currentindex=ref(0)
var shu=ref(['综合排序','销量最高','离我最近','筛选'])
var dian=(index)=>{
    currentindex.value=index
    if(index==1){
        sjshuzu.value.sort((a,b)=>{
           
            return  parseInt(b.monthSalesTip.slice(2,9))- parseInt(a.monthSalesTip.slice(2,9))
        })
    }
    if(index==2){
        sjshuzu.value.sort((a,b)=>{
           
            return  parseFloat(a.distance)- parseFloat(b.distance)
        })
    }
}
onMounted(()=>{
    lunbo().then(res=>{
     console.log(res.data.list);
        lbshuzu.value=res.data.list
    })
    shangjia().then(res=>{
        console.log(res.data.list)
        
        sjshuzu.value=res.data.list
    })
})

</script>

<style scoped>
  .van-search{
    margin-bottom: 10px;
  }
  .my-swipe .van-swipe-item img{
    width: 94%;
    height: 100%;
    border-radius: 10px;
    width: 0 10px;
  }
  .my-swipe{
  text-align: center;
  } 
  .con .title{
    padding-left: 15px;
    margin: 10px 0;
  }
  .con .paixu{
    padding:0 15px;
    display: flex;
    justify-content: space-between;
  }
  .con .anniu{
    display: flex;
    justify-content: space-between;
    padding:10px 15px;
  }
  .con .anniu span{
    width: 80px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    background-color: rgba(128, 128, 128, 0.505);
  }
  .con .box{
    overflow: auto;
    flex: 1;
    height: 400px;
  }
  .main{
    overflow: auto;
    line-height: 30px;
    padding: 0 15px;
    display: flex;
  }
  .main .name{
    font: 14px;
    font-weight: 700;
  }
  .main img{
    margin-right: 10px;
    height: 100px;
    width: 100px;
  }
</style>